<template>
    <div id="projectManagementDetail">
        <div class="wrap">
            <div id="printJS-form">
                <div class="printJS-item">
                    <a-form-model ref="form" :model="form" :label-col="{span: 8}" :wrapper-col="{span: 14}" >
                        <div class="infoTitle">项目信息</div>
                        <div class="form-row">
                            <a-form-model-item label="项目编号" class="form-col">
                                <a-input v-model="form.code" disabled placeholder="请输入项目名称"/>
                            </a-form-model-item>
                            <a-form-model-item label="项目名称" class="form-col">
                                <a-input v-model="form.ncProjectName" disabled placeholder="请输入项目名称"/>
                            </a-form-model-item>
                            <a-form-model-item label="项目状态" class="form-col">
                                <a-select placeholder="请选择" v-model="form.inuseStatus" :allowClear="true" @change="handleStatue">
                                    <a-select-option v-for="item in statusList" :key="item.value" :value="item.value">{{item.label}}</a-select-option>
                                </a-select>
                            </a-form-model-item>
                            <a-form-model-item label="区域公司" class="form-col">
                                <a-input v-model="form.areaName" disabled placeholder="请输入区域公司"/>
                            </a-form-model-item>
                        </div>
                    </a-form-model>
                </div>
            </div>
            <div id="printJS-form">
                <div class="printJS-item">
                    <div class="infoTitle">项目维护记录</div>
                    <div class="tableWrap">
                        <DataTable rowKey="checkDetailId" :showConfig="false" :tableData="Data" :tableColumn="tableColumn"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang='ts'>
import { Component, Watch, Vue } from 'vue-property-decorator'

@Component
export default class projectManagementDetail extends Vue {
    form:any={
        code: '',
        ncProjectName: '',
        inuseStatus: ''
    }
    pageConfig: any = {
        current: 1,
        total: 10,
        pageSize: 10,
        onChange: this.changePage
    }
    statusList:any[] = [
        {
            value: 0,
            label: '在建'
        },
        {
            value: 1,
            label: '完工'
        },
        {
            value: 2,
            label: '装修'
        }
    ]
    Data:any[] = []
    tableColumn:any = {
        createTime: {
            label: '操作时间',
            width: 300
        },
        createBy: {
            label: '操作人员',
            width: 300
        },
        recordContent: {
            label: '操作内容'
        }
    }
    // 选择状态
    handleStatue (val:any) {
        let data = {
            projectId: this.$route.query.ncProjectId,
            inuseStatus: val,
            areaId: this.form.areaId,
            areaName: this.form.areaName
        }
        this.$api.projectAddOrUpdateNcProjectFetch(data).then((res:any) => {
            if (res.code == 0) {
                this.$message.success('操作成功');
            }
        }).catch()
        console.log(val)
    }
    // 获取项目详情
    getProjecDetail () {
        let data = {
            projectId: this.$route.query.ncProjectId
        }
        this.$api.projectProjectDetailFetch(data).then((res:any) => {
            if (res.code == 0) {
                this.form = res.data.project
                this.Data = res.data.records
            }
        }).catch()
    }
    changePage (val: number) {
        this.pageConfig.current = val
        // this.getList()
    }
    init () {
        this.getProjecDetail()
    }
}
</script>
<style lang='scss' scoped>
    #projectManagementDetail{
        .wrap{
  // margin: 0 20px;
  min-width: 960px;
  min-height: calc(100vh - 203px);
  padding: 0 25px;
  #printJS-form{
    .printJS-item{
      background: #fff;
      margin-bottom: 20px;
      border-radius: 8px;

      .infoTitle{
        padding:24px;
        border-bottom: 1px solid #D8D8D8;
        font-size: 16px;
        color:#333333;
        font-weight: bold;
        position: relative;
        &::after{
          content: '';
          width: 4px;
          height: 20px;
          background: #437DFC;
          position:absolute;
          top:50%;
          left: 0;
          margin-top: -10px;
          border-radius: 6px;
        }
      }
      .form-row{
        padding: 24px 24px 14px;
        display: flex;
        flex-wrap: wrap;
          .form-col {
            width: 25%;
            flex-shrink: 0;
          }
      }
      /deep/ .ant-form-item{
        margin-bottom: 10px;
      }
      .tableWrap{
        padding:30px 24px
      }
    }
  }
}
    }
</style>
